<template>
	<view class="page">
		<view class="page_card mb-20">
			<view class="page_card_timer mb-20">
				支付剩余时间: 24:00
			</view>
			<view class="x_y_center mb-10">
				<view class="page_card_bade">
					¥
				</view>
				<view class="page_card_price">
					887.00
				</view>
			</view>
			<view class="page_card_proj">
				【资深设计】-剪发
			</view>
		</view>
		<view class="title">
			选择支付方式
		</view>
		<radio-group @change="radioChange" class="mt-20">
			<label class="x_y_between mb-10" v-for="item in payType" :key="item.payCode">
				<view class="x_y_center">
					<u-icon :name="item.payIcon" size="28" :color="item.payColor"></u-icon>
					<text class="ml-5">{{item.payName}}</text>
				</view>
				<radio :value="item.payCode" :checked="item.checked" />
			</label>
		</radio-group>

		<view class="bottom_btn">
			<u-button text="立即支付" color="#FD4080" @click="savaPay"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				projinfo: {

				},
				radioValue: 0,
				payType:[
					{
						payIcon:'weixin-fill',
						payName:'微信支付',
						payCode:'weixin',
						payColor:'#67CD60',
						checked:true,
					},
					{
						payIcon:'rmb-circle-fill',
						payName:'余额支付',
						payCode:'balance',
						payColor:'#f9ae3d',
						checked:false,
					}
				],
			}
		},
		methods: {
			radioChange(e) {
				console.log('radio发生change事件，携带value值为：', e.detail.value) //e.detail.value就是每次选择后得出来的值
			},
			savaPay(){
				uni.$u.toast('支付失败')
				uni.navigateTo({
					url: '/pages/subscribe/errorPay',
				});
			}
		}
	}
</script>

<style lang="scss">
	.page {
		padding: 30rpx;
		box-sizing: border-box;

		&_card {
			padding: 30rpx;
			box-sizing: border-box;
			border: 1px solid #E5E5E5;
			text-align: center;

			&_timer {
				font-size: 24rpx;
				line-height: 32rpx;
				color: #929292;
			}

			&_bade {
				font-size: 28rpx;
			}

			&_price {
				font-size: 52rpx;
			}

			&_proj {
				font-size: 28rpx;
			}
		}

		.bottom_btn {
			width: 100%;
			padding: 20rpx;
			margin-top: 60rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
		}
	}
</style>
